<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">侧边导航</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '20rpx 0' }">
			<view class="demo-wrap">
				<w-sidebar :sidebarList="sidebarList" scroll :sidebarCurrent="sidebarCurrent" @sidebarClick="sidebarClick">
					<view class="sidebar-content">
						<view class="sidebar-content-text">当前选中的：{{ sidebarList[sidebarCurrent].text }}</view>
					</view>
				</w-sidebar>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="自定义/宽度/颜色/单个高度" color="#e46431" :contentStyle="{ padding: '20rpx 0' }">
			<view class="demo-wrap">
				<w-sidebar
					:sidebarHeight="1000"
					:sidebarWidth="160"
					:sidebarItemHeight="120"
					:sidebarList="sidebarList2"
					activeColor="#e46431"
					scroll
					:sidebarCurrent="sidebarCurrent2"
					@sidebarClick="sidebarClick2"
				>
					<view class="sidebar-content">
						<view class="sidebar-content-text">当前选中的：{{ sidebarList2[sidebarCurrent2].text }}</view>
					</view>
				</w-sidebar>
			</view>
		</pageDemoBlock>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block';
export default {
	components: { pageDemoBlock },
	data() {
		return {
			sidebarCurrent: 0,
			sidebarList: [
				{
					icon: 'icon-icon_github-square',
					text: 'Tab-A'
				},
				{
					icon: 'icon-icon_bilibili-square',
					text: 'Tab-B'
				},
				{
					icon: 'icon-icon_TikTok-square',
					text: 'Tab-C'
				},
				{
					icon: 'icon-icon_qq-square',
					text: 'Tab-D'
				},
				{
					icon: 'icon-icon_wechat-square',
					text: 'Tab-E'
				},
				{
					icon: 'icon-icon_taobao-square',
					text: 'Tab-F'
				},
				{
					icon: 'icon-icon_weibo-square',
					text: 'Tab-G'
				}
			],

			sidebarCurrent2: 0,
			sidebarList2: [
				{
					text: 'Tab-A'
				},
				{
					text: 'Tab-B'
				},
				{
					text: 'Tab-C'
				},
				{
					text: 'Tab-D'
				},
				{
					text: 'Tab-E'
				},
				{
					text: 'Tab-F'
				},
				{
					text: 'Tab-G'
				},
				{
					text: 'Tab-H'
				},
				{
					text: 'Tab-I'
				},
				{
					text: 'Tab-J'
				},
				{
					text: 'Tab-K'
				}
			]
		};
	},
	methods: {
		sidebarClick(index) {
			this.sidebarCurrent = index;
		},
		sidebarClick2(index) {
			this.sidebarCurrent2 = index;
		}
	}
};
</script>

<style lang="scss" scoped>
.sidebar-content {
	padding: 20rpx;
	height: 100%;
	.sidebar-content-text {
		background-color: #fff;
		height: 100%;
		padding: 20rpx;
	}
}
.demo-wrap {
	padding: 20rpx;
	background-color: #d4d4d4;
}
</style>
